<template>
  <div class="canvas-container">
    <div
        class="canvas"
        :style="{
        transform: `translate(${translateX}px, ${translateY}px) scale(${scale})`
      }"
        @mousedown="startDrag"
        @mouseup="endDrag"
        @mousemove="dragging"
        @wheel="zoom"
    >
      <!-- 在这里添加你的画布内容 -->
      <span>'---------画布内容---------'</span>
      <node-index></node-index>
    </div>
  </div>
</template>

<script>
  import NodeIndex from '../../../views/test/canvas/node';

export default {
  name: "CanvasInfinite",
  components: {
    NodeIndex
  },
  data() {
    return {
      isDragging: false,
      startDragX: 0,
      startDragY: 0,
      translateX: 0,
      translateY: 0,
      scale: 1
    };
  },
  methods: {
    startDrag(event) {
      this.isDragging = true;
      this.startDragX = event.clientX;
      this.startDragY = event.clientY;
    },
    endDrag() {
      this.isDragging = false;
    },
    dragging(event) {
      if (this.isDragging) {
        const deltaX = event.clientX - this.startDragX;
        const deltaY = event.clientY - this.startDragY;
        this.translateX += deltaX;
        this.translateY += deltaY;
        this.startDragX = event.clientX;
        this.startDragY = event.clientY;
      }
    },
    zoom(event) {
      const zoomSpeed = 0.1;
      event.preventDefault();
      if (event.deltaY > 0) {
        // 缩小
        this.scale -= zoomSpeed;
      } else {
        // 放大
        this.scale += zoomSpeed;
      }
    }
  }
};
</script>

<style scoped>
.canvas-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.canvas {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  user-drag: none;
  user-select: none;
  cursor: grab;
  transform-origin: 0 0;
}
</style>
